<template>
  <van-popup class="axq-dialog" use-slot :show="show" @close.native="handleClose">
    <view class="axq-dialog-main">
      <template v-if="type=='success'">
        <image class="axq-dialog-icon success" :src="'success.png'|prefixOssUrl" />
      </template>
      <template v-if="type=='error'">
        <image class="axq-dialog-icon error" :src="'error.png'|prefixOssUrl" />
      </template>

      <view v-if="title" class="ad-title">{{ title }}</view>
      <view v-if="subTitle" class="ad-sub-title">{{ subTitle }}</view>
      <view class="axq-dialog__btns">
        <slot name="btns"></slot>
      </view>
    </view>
  </van-popup>
</template>

<script>
export default {
  name: 'AxqDialog',
  components: {},
  mixins: [],
  props: {
    show: Boolean,
    title: String,
    subTitle: String,
    type: String // success
  },
  data () {
    return {}
  },
  methods: {
    handleClose (e) {
      this.$emit('close', e)
    }
  }
}
</script>

<style lang="less">
.axq-dialog {
  --dialog-border-radius: 10rpx;
  &-main {
    .flexLayout(@dir:column,@a:center);
    width: 500rpx;
    padding: 68rpx 30rpx 46rpx;
  }
  &-icon {
    width: 100rpx;
    height: 100rpx;
  }
  .ad-title {
    margin-top: 48rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 36rpx;
    text-align: center;
  }
  .ad-sub-title {
    margin-top: 26rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 36rpx;
    text-align: center;
  }
  .axq-dialog__btns {
    .flexLayout(@j:center);
    margin-top: 110rpx;
    width: 100%;
    .axq-btn {
      width: 200rpx !important;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      background: red;
    }
  }
}
// .axq-btn{
//   width: 200rpx!important;
//   height: 60rpx;
//   line-height: 60rpx;
//   border-radius: 30rpx;
//   background: red
// }
</style>